﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="common_script.aspx.cs" Inherits="Template.Web.Admin.common_script" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>常用插件</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <!--right slidebar-->
    <link href="../css/slidebars.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/style-responsive.css" rel="stylesheet" />
    <!-- 按需加载 -->
    0
    <link rel="stylesheet" type="text/css" href="js/datepicker/css/bootstrap-datepicker3.min.css" />
    <link rel="stylesheet" type="text/css" href="js/syntaxhighlighter/css/shCore.css" />
    <link rel="stylesheet" type="text/css" href="js/syntaxhighlighter/css/shThemeRDark.css" />
    <link rel="stylesheet" type="text/css" href="js/select2/select2.min.css" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <section id="container" class="">
        <!--header start-->
        <header class="header white-bg">
            <div class="sidebar-toggle-box">
                <div data-original-title="Toggle Navigation" data-placement="right" class="fa fa-bars tooltips"></div>
            </div>
            <!--logo start-->
            <a href="index.html" class="logo">Flat<span>lab</span></a>
            <!--logo end-->
            <div class="nav notify-row" id="top_menu">
                <!--  notification start -->
                <ul class="nav top-menu">
                    <!-- settings start -->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="fa fa-tasks"></i>
                            <span class="badge bg-success">6</span>
                        </a>
                        <ul class="dropdown-menu extended tasks-bar">
                            <div class="notify-arrow notify-arrow-green"></div>
                            <li>
                                <p class="green">You have 6 pending tasks</p>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Dashboard v1.3</div>
                                        <div class="percent">40%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                            aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                            <span class="sr-only">40% Complete (success)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Database Update</div>
                                        <div class="percent">60%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                                            aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (warning)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Iphone Development</div>
                                        <div class="percent">87%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20"
                                            aria-valuemin="0" aria-valuemax="100" style="width: 87%">
                                            <span class="sr-only">87% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Mobile App</div>
                                        <div class="percent">33%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"
                                            aria-valuemin="0" aria-valuemax="100" style="width: 33%">
                                            <span class="sr-only">33% Complete (danger)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Dashboard v1.3</div>
                                        <div class="percent">45%</div>
                                    </div>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0"
                                            aria-valuemax="100" style="width: 45%">
                                            <span class="sr-only">45% Complete</span>
                                        </div>
                                    </div>

                                </a>
                            </li>
                            <li class="external">
                                <a href="#">See All Tasks</a>
                            </li>
                        </ul>
                    </li>
                    <!-- settings end -->
                    <!-- inbox dropdown start-->
                    <li id="header_inbox_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge bg-important">5</span>
                        </a>
                        <ul class="dropdown-menu extended inbox">
                            <div class="notify-arrow notify-arrow-red"></div>
                            <li>
                                <p class="red">You have 5 new messages</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo">
                                        <img alt="avatar" src="img/avatar-mini.jpg"></span>
                                    <span class="subject">
                                        <span class="from">Jonathan Smith</span>
                                        <span class="time">Just now</span>
                                    </span>
                                    <span class="message">Hello, this is an example msg.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo">
                                        <img alt="avatar" src="img/avatar-mini2.jpg"></span>
                                    <span class="subject">
                                        <span class="from">Jhon Doe</span>
                                        <span class="time">10 mins</span>
                                    </span>
                                    <span class="message">Hi, Jhon Doe Bhai how are you ?
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo">
                                        <img alt="avatar" src="img/avatar-mini3.jpg"></span>
                                    <span class="subject">
                                        <span class="from">Jason Stathum</span>
                                        <span class="time">3 hrs</span>
                                    </span>
                                    <span class="message">This is awesome dashboard.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo">
                                        <img alt="avatar" src="img/avatar-mini4.jpg"></span>
                                    <span class="subject">
                                        <span class="from">Jondi Rose</span>
                                        <span class="time">Just now</span>
                                    </span>
                                    <span class="message">Hello, this is metrolab
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">See all messages</a>
                            </li>
                        </ul>
                    </li>
                    <!-- inbox dropdown end -->
                    <!-- notification dropdown start-->
                    <li id="header_notification_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                            <i class="fa fa-bell-o"></i>
                            <span class="badge bg-warning">7</span>
                        </a>
                        <ul class="dropdown-menu extended notification">
                            <div class="notify-arrow notify-arrow-yellow"></div>
                            <li>
                                <p class="yellow">You have 7 new notifications</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                    Server #3 overloaded.
                                <span class="small italic">34 mins</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-warning"><i class="fa fa-bell"></i></span>
                                    Server #10 not respoding.
                                <span class="small italic">1 Hours</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                    Database overloaded 24%.
                                <span class="small italic">4 hrs</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success"><i class="fa fa-plus"></i></span>
                                    New user registered.
                                <span class="small italic">Just now</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-info"><i class="fa fa-bullhorn"></i></span>
                                    Application error.
                                <span class="small italic">10 mins</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">See all notifications</a>
                            </li>
                        </ul>
                    </li>
                    <!-- notification dropdown end -->
                </ul>
            </div>
            <div class="top-nav ">
                <ul class="nav pull-right top-menu">
                    <li>
                        <input type="text" class="form-control search" placeholder="Search">
                    </li>
                    <!-- user login dropdown start-->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" src="img/avatar1_small.jpg">
                            <span class="username">Jhon Doue</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            <li><a href="#"><i class=" fa fa-suitcase"></i>Profile</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
                            <li><a href="#"><i class="fa fa-bell-o"></i>Notification</a></li>
                            <li><a href="login.html"><i class="fa fa-key"></i>Log Out</a></li>
                        </ul>
                    </li>

                    <!-- user login dropdown end -->
                    <li class="sb-toggle-right">
                        <i class="fa  fa-align-right"></i>
                    </li>
                </ul>
            </div>
        </header>
        <!--header end-->
        <!--sidebar start-->
        <aside>
            <div id="sidebar" class="nav-collapse ">
                <!-- sidebar menu start-->
                <ul class="sidebar-menu" id="nav-accordion">
                    <li>
                        <a href="index.html">
                            <i class="fa fa-dashboard"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>

                    <li class="sub-menu">
                        <a href="javascript:;">
                            <i class="fa fa-laptop"></i>
                            <span>基本控件</span>
                        </a>
                        <ul class="sub">
                            <li><a href="basic.html">页面展示控件</a></li>
                            <li><a href="basic.html">查询列表控件</a></li>
                            <li><a href="basic.html">基本列表控件</a></li>
                        </ul>
                    </li>
                    <!--multi level menu end-->

                </ul>
                <!-- sidebar menu end-->
            </div>
        </aside>
        <!--sidebar end-->
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper site-min-height">
                <!-- page start-->
                <div class="row">
                    <div class="col-md-3">
                        <ul class="vertical-menu">
                            <li class="active">
                                <a href="#tab_1" data-toggle="tab" aria-expanded="true"><i class="fa fa-bullhorn"></i>
                                    data picker 日期插件
                                </a></li>
                            <li class="">
                                <a href="#tab_2" data-toggle="tab" aria-expanded="false"><i class="fa fa-bolt"></i>
                                    input maxlength 提示插件
                                </a></li>
                            <li class="">
                                <a href="#tab_3" data-toggle="tab" aria-expanded="false"><i
                                    class="fa fa-briefcase"></i>
                                    select2 插件
                                </a></li>
                            <li class="">
                                <a href="#tab_4" data-toggle="tab" aria-expanded="false"><i
                                    class="fa fa-bookmark"></i>
                                    datatables 表格插件
                                </a></li>
                            <li class="">
                                <a href="#tab_5" data-toggle="tab" aria-expanded="false"><i
                                    class="fa fa-exclamation-circle"></i>
                                    file upload 上传插件
                                </a></li>
                            <li class="">
                                <a href="#tab_6" data-toggle="tab" aria-expanded="false"><i class="fa fa-plus"></i>
                                    富文本编辑器 插件
                                </a></li>
                        </ul>
                    </div>
                    <div class="col-md-9">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_1">
                                <div class="panel-group" id="accordion1">
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a href="#accordion1_1" data-parent="#accordion1" data-toggle="collapse"
                                                    class="accordion-toggle">1. 单个日期选择框
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="accordion1_1">
                                            <div class="panel-body">
                                                <div class="col-md-4">
                                                    <div class="input-group date form_datetime" data-date="">
                                                        <input type="text" size="16" class="form-control"
                                                            readonly="readonly" />
                                                        <span class="input-group-btn">
                                                            <button class="btn default date-set"
                                                                type="button">
                                                                <i
                                                                    class="fa fa-calendar"></i>
                                                            </button>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <p>Note：</p>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: xml;toolbar: false;">
                                                    <link rel="stylesheet" type="text/css"
                                                          href="js/datepicker/css/bootstrap-datepicker3.min.css"/>
                                                    <script type="text/javascript"
                                                            src="js/datepicker/scripts/bootstrap-datepicker.min.js"></script>

                                                    <div class="input-group date form_datetime" data-date="">
                                                        <input type="text" size="16" class="form-control"
                                                               readonly="readonly"/>
                                                        <span class="input-group-btn">
                                                        <button class="btn default date-set" type="button"><i
                                                                class="fa fa-calendar"></i></button>
                                                        </span>
                                                    </div>
                                                </pre>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: js;toolbar: false;">
                                                    $(".form_datetime").datepicker({
                                                        format: "yyyy-mm-dd",
                                                        todayBtn: "linked",
                                                        clearBtn: true,
                                                        language: "zh-CN",
                                                        autoclose: true,
                                                        todayHighlight: true,
                                                        toggleActive: true
                                                    });
                                                </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a href="#accordion1_2" data-parent="#accordion1" data-toggle="collapse"
                                                    class="accordion-toggle">2. 日期范围选择框
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="accordion1_2">
                                            <div class="panel-body">
                                                <div class="col-md-6">
                                                    <div class="input-group input-daterange range_datetime" id="">
                                                        <input type="text" class=" form-control" readonly="" id="timeStart" name="timeStart" />
                                                        <span class="input-group-addon">到</span>
                                                        <input type="text" class=" form-control" readonly="" id="timeEnd" name="timeEnd" />
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <p>Note：</p>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: xml;toolbar: false;">
                                                    <link rel="stylesheet" type="text/css"
                                                          href="js/datepicker/css/bootstrap-datepicker3.min.css"/>
                                                    <script type="text/javascript"
                                                            src="js/datepicker/scripts/bootstrap-datepicker.min.js"></script>

                                                   <div class="input-group input-daterange range_datetime" id="">
                                                       <input type="text" class=" form-control" readonly="" id="timeStart" name="timeStart" />
                                                       <span class="input-group-addon">到</span>
                                                       <input type="text" class=" form-control" readonly="" id="timeEnd" name="timeEnd" />
                                                   </div>
                                                </pre>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: js;toolbar: false;">
                                                     $(".range_datetime").datepicker({
                                                        format: "yyyy-mm-dd",
                                                        todayBtn: "linked",
                                                        clearBtn: true,
                                                        language: "zh-CN",
                                                        autoclose: true,
                                                        todayHighlight: true,
                                                        toggleActive: true
                                                     });
                                                </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="tab-pane" id="tab_2">
                                <div class="panel-group" id="accordion2">
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a href="#accordion2_1" data-parent="#accordion2" data-toggle="collapse"
                                                    class="accordion-toggle">1. 总是显示maxlength
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="accordion2_1">
                                            <div class="panel-body">
                                                <div class="col-md-4">
                                                    <input id="maxlength_input_demo" type="text" maxlength="10"
                                                        class="form-control" />
                                                </div>
                                                <div class="col-md-12">
                                                    <p>Note：</p>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: xml;toolbar: false;">
                                                     <script type="text/javascript"
                                                             src="js/maxlength/bootstrap-maxlength.min.js"></script>

                                                     <input id="maxlength_input" type="text" maxlength="10"
                                                            class="form-control"/>
                                                </pre>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: js;toolbar: false;">
                                                    $('#maxlength_input').maxlength({
                                                        limitReachedClass: "label label-danger",
                                                        alwaysShow: true
                                                    });
                                                </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tab_3">
                                <div class="panel-group" id="accordion3">
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a href="#accordion3_1" data-parent="#accordion3" data-toggle="collapse"
                                                    class="accordion-toggle">1. 单选
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="accordion3_1">
                                            <div class="panel-body">
                                                <div class="col-md-6">
                                                    <select class=" js-example-basic-single-demo form-control ">
                                                        <option value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12">
                                                    <p>Note：实际项目select不会这么丑，这里不知出现什么问题，待解决。</p>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: xml;toolbar: false;">
                                                     <link rel="stylesheet" type="text/css"
                                                           href="js/select2/select2.min.css"/>
                                                     <script type="text/javascript"
                                                             src="js/select2/select2.full.min.js"></script>

                                                    <select class=" js-example-basic-single form-control ">
                                                        <option value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                    </select>
                                                </pre>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: js;toolbar: false;">
                                                    $(".js-example-basic-single").select2();
                                                </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a href="#accordion3_2" data-parent="#accordion3" data-toggle="collapse"
                                                    class="accordion-toggle">2. 多选
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="accordion3_2">
                                            <div class="panel-body">
                                                <div class="col-md-12">
                                                    <select class="js-example-basic-multiple-demo form-control"
                                                        multiple="multiple">
                                                        <option value="1">呵呵哒</option>
                                                        <option value="2">萌萌哒</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12">
                                                    <p>Note：实际项目select不会这么丑，这里不知出现什么问题，待解决。</p>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: xml;toolbar: false;">
                                                     <link rel="stylesheet" type="text/css"
                                                           href="js/select2/select2.min.css"/>
                                                     <script type="text/javascript"
                                                             src="js/select2/select2.full.min.js"></script>

                                                    <select class="js-example-basic-multiple form-control"
                                                            multiple="multiple">
                                                        <option value="one">呵呵哒</option>
                                                        <option value="two">萌萌哒</option>
                                                    </select>
                                                </pre>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: js;toolbar: false;">
                                                    $(".js-example-basic-multiple").select2({allowClear: true });
                                                </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a href="#accordion3_3" data-parent="#accordion3" data-toggle="collapse"
                                                    class="accordion-toggle">3. 选项不可用
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="accordion3_3">
                                            <div class="panel-body">
                                                <div class="col-md-12">
                                                    <select class="js-example-disabled-results-demo form-control">
                                                        <option value="one">First</option>
                                                        <option value="two" disabled="disabled">Second (disabled)</option>
                                                        <option value="three">Third</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12">
                                                    <p>Note：</p>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: xml;toolbar: false;">
                                                     <link rel="stylesheet" type="text/css"
                                                           href="js/select2/select2.min.css"/>
                                                     <script type="text/javascript"
                                                             src="js/select2/select2.full.min.js"></script>

                                                     <select class="js-example-disabled-results form-control">
                                                         <option value="one">First</option>
                                                         <option value="two" disabled="disabled">Second (disabled)
                                                         </option>
                                                         <option value="three">Third</option>
                                                     </select>
                                                </pre>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: js;toolbar: false;">
                                                    $(".js-example-disabled-results-demo").select2();
                                                </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a href="#accordion3_4" data-parent="#accordion3" data-toggle="collapse"
                                                    class="accordion-toggle">4. 设置多选的数量
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="accordion3_4">
                                            <div class="panel-body">
                                                <div class="col-md-12">
                                                    <select class="js-example-basic-multiple-limit-demo form-control"
                                                        multiple="multiple">
                                                        <option value="one">First</option>
                                                        <option value="two">Second</option>
                                                        <option value="three">Third</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12">
                                                    <p>Note：</p>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: xml;toolbar: false;">
                                                     <link rel="stylesheet" type="text/css"
                                                           href="js/select2/select2.min.css"/>
                                                     <script type="text/javascript"
                                                             src="js/select2/select2.full.min.js"></script>

                                                    <select class="js-example-basic-multiple-limit form-control"
                                                            multiple="multiple">
                                                        <option value="one">First</option>
                                                        <option value="two">Second</option>
                                                        <option value="three">Third</option>
                                                    </select>
                                                </pre>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: js;toolbar: false;">
                                                    $(".js-example-basic-multiple-limit-demo").select2({
                                                        allowClear: true,
                                                        maximumSelectionLength: 2
                                                    });
                                                </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a href="#accordion3_5" data-parent="#accordion3" data-toggle="collapse"
                                                    class="accordion-toggle">5. 选项带模板
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="accordion3_5">
                                            <div class="panel-body">
                                                <div class="col-md-12">
                                                    <select class="js-example-templating-demo form-control"
                                                        multiple="multiple">
                                                        <option value="1">呵呵哒</option>
                                                        <option value="2">萌萌哒</option>
                                                        <option value="3">啦啦啦</option>
                                                        <option value="4">哈哈哈</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12">
                                                    <p>Note：实际项目select不会这么丑，这里不知出现什么问题，待解决。</p>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: xml;toolbar: false;">
                                                     <link rel="stylesheet" type="text/css"
                                                           href="js/select2/select2.min.css"/>
                                                     <script type="text/javascript"
                                                             src="js/select2/select2.full.min.js"></script>

                                                    <select class="js-example-templating-demo form-control"
                                                            multiple="multiple">
                                                        <option value="1">呵呵哒</option>
                                                        <option value="2">萌萌哒</option>
                                                        <option value="3">啦啦啦</option>
                                                        <option value="4">哈哈哈</option>
                                                    </select>
                                                </pre>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: js;toolbar: false;">
                                                    function formatState (state) {
                                                        if (!state.id) { return state.text; }
                                                        var $state = $(
                                                                '<span><i class="fa fa-file-text-o"></i> ' + state.text + '</span>'
                                                        );
                                                        return $state;
                                                    };
                                                    $(".js-example-templating").select2({
                                                        allowClear: true,
                                                        templateResult: formatState,
                                                        templateSelection: formatState
                                                    });
                                                </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a href="#accordion3_6" data-parent="#accordion3" data-toggle="collapse"
                                                    class="accordion-toggle">6. 编程
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="accordion3_6">
                                            <div class="panel-body">
                                                <div class="col-md-12">
                                                    <p>Note：跟平常一样当select用就可以</p>
                                                </div>
                                                <div class="col-md-12">
                                                    <pre class="brush: js;toolbar: false;">
                                                    // jquery 操作
                                                    $(".js-example-basic-multiple-limit-demo").on('click change',...);
                                                    $(...).val(null).trigger("change");
                                                    $(...).val("valuex").trigger("change");
                                                    // 多选默认用逗号隔开，可以通过配置设置成其他符号
                                                    tokenSeparators: [',', ' ']
                                                </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- page end-->
            </section>
        </section>
        <!--main content end-->

        <!-- Right Slidebar start -->
        <div class="sb-slidebar sb-right sb-style-overlay">
        </div>
        <!-- Right Slidebar end -->

        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                2013 &copy; FlatLab by VectorLab.
            <a href="#" class="go-top">
                <i class="fa fa-angle-up"></i>
            </a>
            </div>
        </footer>
        <!--footer end-->
    </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script class="include" type="text/javascript" src="../js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="../js/jquery.scrollTo.min.js"></script>
    <script src="../js/slidebars.min.js"></script>
    <script src="../js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="../js/respond.min.js"></script>

    <!--common script for all pages-->
    <script src="../js/common-scripts.js"></script>

    <!-- 按需加载 -->
    <script type="text/javascript" src="js/datatables/jquery.dataTables.js"></script>
    <script type="text/javascript" src="js/datatables/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="js/datepicker/scripts/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="js/syntaxhighlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="js/syntaxhighlighter/scripts/shAutoloader.js"></script>
    <script type="text/javascript" src="js/maxlength/bootstrap-maxlength.min.js"></script>
    <script type="text/javascript" src="js/select2/select2.full.min.js"></script>
    <script>
        $(document).ready(function () {

            SyntaxHighlighter.autoloader(
                    ['js', 'jscript', 'javascript', 'js/syntaxhighlighter/scripts/shBrushJScript.js'],
                    ['css', 'js/syntaxhighlighter/scripts/shBrushCss.js'],
                    ['xml', 'html', 'js/syntaxhighlighter/scripts/shBrushXml.js'],
                    ['sql', 'js/syntaxhighlighter/scripts/shBrushSql.js'],
                    ['c#', 'js/syntaxhighlighter/scripts/shBrushCSharp.js']
            );
            SyntaxHighlighter.all();

            //==============================
            // 日期处理
            //==============================
            (function ($) {
                $(".form_datetime").datepicker({
                    format: "yyyy-mm-dd",
                    todayBtn: "linked",
                    clearBtn: true,
                    language: "zh-CN",
                    autoclose: true,
                    todayHighlight: true,
                    toggleActive: true
                });

                $(".range_datetime").datepicker({
                    format: "yyyy-mm-dd",
                    todayBtn: "linked",
                    clearBtn: true,
                    language: "zh-CN",
                    autoclose: true,
                    todayHighlight: true,
                    toggleActive: true
                });
            })(jQuery);

            //==============================
            // maxlength 提示
            //==============================
            (function ($) {
                $('#maxlength_input_demo').maxlength({
                    limitReachedClass: "label label-danger",
                    alwaysShow: true
                });
            })(jQuery);

            //==============================
            // select2
            //==============================
            (function ($) {
                $(".js-example-basic-single-demo").select2({
                });
                $(".js-example-basic-multiple-demo").select2({
                    allowClear: true
                });
                $(".js-example-disabled-results-demo").select2({
                });
                $(".js-example-basic-multiple-limit-demo").select2({
                    allowClear: true,
                    maximumSelectionLength: 2
                });
                function formatState(state) {
                    if (!state.id) { return state.text; }
                    var $state = $(
                            '<span><i class="fa fa-file-text-o"></i> ' + state.text + '</span>'
                    );
                    return $state;
                };
                $(".js-example-templating-demo").select2({
                    allowClear: true,
                    templateResult: formatState,
                    templateSelection: formatState
                });
            })(jQuery);

        });




    </script>
</body>
</html>

